<template>
	<view class="searchPage">
		<headerinfo></headerinfo>

<view class="" style="height: 20px;">
			
		</view>
				<view class="boxShadow">
					<view class="content">
						<u-navbar title="我的足迹" :autoBack="true"></u-navbar>
					</view>
					<view class="content" v-if="listData.length > 0">
						<view class="card" v-for="(item, index) in listData" :key="index"><new-item :new="item" :newIndex="index"></new-item></view>
					</view>
				</view>
				
				
		
		<nodata v-if="listData.length == 0 && loadingOver"></nodata>
		<view class="nomore" v-if="query.lastDocId == '' && listData.length > 0">
			没有更多了 ~
		</view>
	</view>
</template>

<script>
import newItem from '@/components/new-item.vue';
export default {
	components: { newItem },
	data() {
		return {
			query: {
				lastDocId: '',
				pageSize: 10
			},
			listData: [],
			listOver:false,
			loadingOver:false
		};
	},
	onPullDownRefresh() {
		this.query.lastDocId = '';
		this.listData = []
		this.getData();
	},
	onReachBottom() {
		if(!this.listOver){
			this.getData();
		}
	},
	onLoad() {
		this.getData();
	},
	methods: {
		getData() {
			uni.showLoading({
				title: '加载中...'
			});
			this.loadingOver = false
			this.$api.myFootprint(this.query).then(res => {
				console.log(res);
				this.listData = [...this.listData, ...res.list];

				if (res.lastDocId) {
					this.query.lastDocId = res.lastDocId;
				}else{
					this.query.lastDocId = ''
				}
				
				if(res.list.length < this.query.pageSize){
					this.listOver = true
				}
				this.loadingOver = true
				uni.hideLoading();
				uni.stopPullDownRefresh();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.boxShadow{
		width: 60%;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 0 auto;
		box-shadow: 0 0 3px #ccc;
	}
	.content{
		
	}
.searchPage {
	background-color: #fff;
	.card {
		margin-top: 20rpx;
	}
}
</style>
